<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left iconfont" @tap="back">
				&#xe614;
			</view>
			<view class="top-bar-right iconfont" v-if="relation === 0 || relation === 1" @tap="toUserDetail">
				&#xe615;
			</view>
		</view>
		<view class="bg">
			<image :src="user.imgurl" mode="aspectFill"></image>
		</view>
		<view class="main">
			<view class="user-icon">
				<image :src="user.imgurl" :animation="animationData2"></image>
			</view>
			<view class="user-info">
				<view class="name">{{user.name}}</view>
				<view class="sex">性别: {{user.sex}}</view>
				<view class="sign">{{user.introduce}}</view>
			</view>
		</view>
		<view class="bottom-bar">
			<view class="bottom-btn" @tap="addFriendAnimation" v-if="relation === 2">加为好友</view>
			<view class="bottom-btn" @tap="toChatroom(id)" v-if="relation === 1">发送消息</view>
		</view>
		<view class="add-msg" :style="{height:addHeight,bottom:'-'+addHeight}" :animation="animationData">
			<view class="name">{{user.name}}</view>
			<textarea v-model="requestData" placeholder="在此输入验证信息" maxlength="100" class="add-text" />
			</view>
		<view class="add-btn" :animation="animationData1">
			<view class="send" @tap="addFriendConfirm">发送</view>
			<view class="close" @tap="addFriendAnimation">取消</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storageData: '',
				mytoken: undefined,
				requestData: '',
				addHeight: '1000',
				user: {
					name: '',
					imgurl: '',
					sex: '',
					introduce: ''
				},
				//动画数据
				animationData: {},
				animationData1: {},
				animationData2: {},
				//监听动画
				isAddAnimation: false,
				//对象id
				id: '',
				//用户id
				uid: '',
				//用户关系(0自己,1好友,2陌生人)
				relation: ''
			};
		},
		onLoad(e) {
			this.id = e.id
			this.getStorages()
			if(this.mytoken !== undefined){
				this.getUser()
				this.judgeFriend()
			}
		},
		onShow() {
			try {
			    const value = uni.getStorageSync('user')
			    if (value) {
			        this.storageData = value
			    }
			} catch (e) {
			    // error
			}
			if(!this.storageData.token){
				uni.navigateTo({
					url: '../login/login'
				})
			}else{
				this.getUser()
			}
		},
		onReady() {
			this.getElementStyle()
		},
		methods: {
			//获取本地缓存
			getStorages: function() {
				try {
				    const value = uni.getStorageSync('user')
				    if (value) {
				        this.uid = value.id
						this.mytoken = value.token
				    }
				} catch (e) {
					//没有缓存跳转到登录页面
					uni.showToast({
						title: '服务器发生错误!',
						icon: 'none',
						duration: 2000
					})
				    uni.navigateTo({
				    	url: '../index/index'
				    })
				}
			},
			//获取用户信息
			getUser(){
				uni.request({
					url: this.baseURL+'/user/detail',
					data: {
						id: this.id
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							//成功
							let res = data.data.result
							this.user.name = res.name
							this.user.imgurl = this.baseURL+res.imgurl
							//性别判断
							if(res.introduce === undefined){
								this.user.sex = '未知'
							}else{
								this.user.sex = res.sex
							}
							//简介判断
							if(res.introduce === undefined || res.introduce === null || res.introduce ===""){
								this.user.introduce = '这个人还没有简介!'
							}else{
								this.user.introduce = res.introduce
							}
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			//判断用户关系
			judgeFriend(){
				if(this.id === this.uid){
					//是自己
					this.relation = 0
				}else{
					//不是自己
					uni.request({
						url: this.baseURL+'/search/isfriend',
						data: {
							uid: this.uid,
							fid: this.id
						},
						method: 'POST',
						success: (data) => {
							let status = data.data.status
							if (status === 200) {
								//是好友
								this.relation = 1
							} else if (status === 400) {
								//不是好友
								this.relation = 2
							} else if (status === 500) {
								uni.showToast({
									title: '服务器发生错误!',
									icon: 'none',
									duration: 2000
								})
							}
						}
					})
				}
			},
			//返回
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			//获取元素样式
			getElementStyle: function() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.bg').boundingClientRect(data => {
				  this.addHeight = (data.height-186)+'px'
				}).exec();
			},
			//添加好友动画
			addFriendAnimation: function() {
				this.isAddAnimation = !this.isAddAnimation
				var animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease'
				})
				var animation1 = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease'
				})
				var animation2 = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease'
				})
				if(this.isAddAnimation) {
					animation.bottom(0).step()
					animation1.bottom(0).step()
					animation2.width(120).height(120).top(40).step()
				}else{
					animation.bottom('-'+this.addHeight).step()
					animation1.bottom(-100).step()
					animation2.width(200).height(200).top(0).step()
				}
				this.animationData = animation.export()
				this.animationData1 = animation1.export()
				this.animationData2 = animation2.export()
			},
			//去聊天页面
			toChatroom(id) {
				uni.navigateTo({
					url: '../chatroom/chatroom?id=' + id
				})
			},
			addFriendConfirm() {
				this.addFriendAnimation()
				uni.request({
					url: this.baseURL+'/friend/applyfriend',
					data: {
						uid: this.uid,
						fid: this.id,
						msg: this.requestData
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							//成功
							uni.showToast({
								title: '好友请求发送成功!',
								icon: 'none',
								duration: 2000
							})
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			//跳转到用户详情页面
			toUserDetail(){
				uni.navigateTo({
					url: '../userdetail/userdetail?id='+this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../commons/css/style.scss';

	.top-bar {
		justify-content: space-between;
		background: none;
		.top-bar-left {
			width: 88rpx;
			height: 88rpx;
			line-height: 88rpx;
			padding-left:10rpx;

			image {
				margin: 21rpx 0 0 21rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}

		.top-bar-right {
			padding-right: 16rpx;
		}
	}
	.bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		
		image {
			opacity: 0.4;
			width: 110%;
			height: 110%;
			filter: blur(12px);
		}
	}
	.main {
		text-align: center;
		padding-top: 148rpx;
		.user-icon {
			image {
				z-index: 10;
				width: 400rpx;
				height: 400rpx;
				top: 0;
				border-radius: 48rpx;
				border: 4rpx solid #FFFFFF;
			}
		}
		.user-info {
			padding-top: 42rpx;
			.name {
				font-size: 52rpx;
				line-height: 74rpx;
			}
			.sex {
				font-size: $uni-font-size-base;
				line-height: 40rpx;
			}
			.sign {
				padding: 20rpx 100rpx;
				font-size: $uni-font-size-base;
				line-height: 40rpx;
			}
		}
	}
	.add-msg {
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0 0;
		padding: 0 60rpx;
		.name {
			padding: 168rpx 0 40rpx 0;
			font-size: 52rpx;
			line-height: 74rpx;
		}
		.add-text {
			width: 100%;
			box-sizing: border-box;
			height: 420rpx;
			padding: 18rpx 22rpx;
			background-color: $uni-bg-color-grey;
			border-radius: 12rpx;
		}
	}
	.add-btn {
		position: fixed;
		bottom: -104rpx;
		width: 100%;
		height: 104rpx;
		box-sizing: border-box;
		padding: 0rpx $uni-spacing-col-base;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.send {
			width: 600rpx;
			height: 80rpx;
			margin-right: $uni-spacing-col-base;
			line-height: 80rpx;
			background-color: #5b8bea;
			color: #FFFFFF;
			text-align: center;
			font-weight: 600;
			border-radius: $uni-border-radius-sm;
		}
		.close {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #cfced1;
			color: #3e3e3e;
			text-align: center;
			font-weight: 600;
			border-radius: $uni-border-radius-sm;
		}
	}
</style>
